$(function () {
  // 需求1: 点击a链接,显示隐藏盒子
  $("#loginBox a").on("click", function () {
    //   #loginBox隐藏,  #registerbox显示
    $("#loginBox").hide();
    $("#registerBox").show();
  });
  $("#registerBox a").on("click", function () {
    //   #loginBox显示,  #registerbox隐藏
    $("#loginBox").show();
    $("#registerBox").hide();
  });

  //   需求2:自定义校验规则
  let form = layui.form;
  //   verify()的值是一个对象
  form.verify({
    // 属性是规则名称,值可以是数组或者函数
    pwd: [
      /^[\S]{6,15}$/, // 第一个值是校验规则
      "密码的长度为6-15个字符,且不能包含空格", //报错信息
    ], //要有逗号分割

    repwd: function (value) {
      //规则添加给谁,value就是他的值
      // value 也可以写成$('[name=repassword ]').val()
      let pwd = $("#registerBox [name=password]").val();
      //   判断:第一次输入的密码和第二次结果不同,报错
      if (value !== pwd) {
        return "输入的两次密码不一致!";
      }
    },
  });

  //   需求3: 注册axios
  let layer = layui.layer;
  $("#form-reg").on("submit", function (e) {
    // 阻止表单提交
    e.preventDefault();
    // 发送ajax
    axios({
      method: "POST",
      url: "/api/reguser",
      // 这个服务器,后端不允许传递json格式数据,只允许传递a=1&b=2&c=3
      data: $("#form-reg").serialize(),
    }).then((res) => {
      // console.log(res.data);
      // 判断状态码
      if (res.data.status !== 0) {
        // return alert(res.data.message);
        return layer.msg(res.data.message);
      }
      // 注册成功，给提示
      //   alert(res.data.message);
      layer.msg("恭喜您,注册用户成功!");
      // 清空表单
      $("#form-reg")[0].reset();
      //   切换到登录区域
      $("#registerBox a").click();
    });
  });

  //   需求4: 登录
  $("#form-login").on("submit", function (e) {
    e.preventDefault();
    axios({
      method: "POST",
      url: "/api/login",
      data: $("#form-login").serialize(),
    }).then((res) => {
      // console.log(res.data);
      let obj = res.data;
      if (obj.status != 0) {
        return layer.msg(obj.message);
      }
      //   成功:提示  跳转  保存token
      layer.msg("恭喜您,登录成功!");
      location.href = "/index.html";
      localStorage.setItem("token", obj.token);
    });
  });
});
